<template>
    <h2>1.vue数据仓库中存在的正常数据</h2>
    <p>{{ msg }}</p>
    <p>{{ id }}</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ user }}</p>
    <p>{{ user.id }}</p>
    <p>{{ user.username }}</p>
    <p>{{ user.password }}</p>
    <p>{{ student }}</p>
    <button @click="f1">控制台打印学生信息</button>
    <p>{{ emp }}</p>
    <button @click="f2">控制台打印员工信息</button>
    <p>{{ flag }}</p>

    <!-- 
        对于null与undefined在vue界面中显示空字符串
        即:什么都不显示
        对于NaN是直接显示NaN
    -->
    <h2>2.读取vue数据仓库中存在的非正常数据</h2>
    <p>{{ test1 }}</p>
    <p>{{ test2 }}</p>
    <p>{{ test3 }}</p>

    <h2>3.支持简单的js表达式</h2>
    <p>{{ num1 + num2 }}</p>
    <p>{{ num1 - num2 }}</p>
    <p>{{ num1 * num2 }}</p>
    <p>{{ num1 / num2 }}</p>
    <p>{{ num1 % num2 }}</p>
    <!-- 直接定义值,不需要从数据仓库中获取 -->
    <p>{{ true }}</p>
    <p>{{ 'admin' }}</p>
    <p>{{ true && false }}</p>
    <p>{{ true || false }}</p>
    <p>{{ age < 18 ? '未成年' : '成年' }}</p>

    <h2>js内置对象</h2>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>
</template>
<script setup>
import { reactive, ref } from 'vue';

// 正常数据
const msg = ref('Hello Vue')
const id = ref(1)
const name = ref('admin')
const age = ref(15)

const user = ref({ id: 2, username: 'admin', password: '123456' })

// const student = ref({id:id,name:name,age:age})
// 简写方式
// 当属性名与属性值相同时,可以直接简写成属性名即可
const student = ref({ id, name, age })

function f1() {
    console.log(student.value.id)
}

const emp = reactive({ id, name, salary: 8000.0 })
// reactive不能修改数据
// emp = reactive({id:2,name:'jack',salary:6000.0}) // 报错
function f2() {
    console.log(emp.name)
}
const flag = ref(true)

// 非正常数据
const test1 = ref(null)
const test2 = ref(undefined)
const test3 = ref(NaN)


const num1 = ref(3)
const num2 = ref(2)

</script>